<template>
  <div>
    <TitleSecondary title="附件" :icon="icon" @change="handleChangeIcon" />
    <div v-show="icon === 'up'" class="log-container">
      <p-table
        class="table-list-container"
        row-key="id"
        :scroll="{ x: '100%' }"
        :columns="columns"
        bordered
        :pagination="false"
        :data-source="dataSource"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <a
          slot="atthName"
          slot-scope="text, record"
          @click="handleNumberClick(record)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      icon: 'down',
    };
  },
  computed: {
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '附件名称',
          width: 100,
          ellipsis: true,
          dataIndex: 'atthName',
          scopedSlots: { customRender: 'atthName' },
        },
        {
          align: 'center',
          title: '部门',
          width: 150,
          ellipsis: true,
          dataIndex: 'createUserDeptName',
        },
        {
          align: 'center',
          title: '上传人姓名',
          width: 100,
          ellipsis: true,
          dataIndex: 'createUserName',
        },
        {
          align: 'center',
          title: '上传时间',
          width: 100,
          ellipsis: true,
          dataIndex: 'createTime',
        },
      ];
      return columns;
    },
  },
  created() {},
  methods: {
    handleChangeIcon(icon) {
      this.icon = icon === 'down' ? 'up' : 'down';
    },
    // 下载附件
    handleNumberClick(record) {
      window.open(record.atthAccessPath);
    },
  },
};
</script>

<style lang="less" scoped>
.table-list-container {
  margin-top: 20px;
  margin-bottom: 40px;
}
</style>
